import React, { Component } from 'react'

class Cpn extends Component {
  render() {
    return <h2>我是CPN组件</h2>
  }

  // componentWillUnmount() {
  //   console.log("cpn执行componentWillUnmount")
  // }
}

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      counter: 0,
      isShow: true
    }
    console.log("执行组件的constructor")
  }
  render() {
    console.log("执行了组件的render函数")
    return (
      <div>
        我是组件
        <h2>当前计数:{this.state.counter}</h2>
        <button onClick={() => { this.increment() }}>+1</button>
        <hr/>
        <button onClick={() => this.changeCpnShow()}>切换</button>
        {this.state.isShow && <Cpn/>}
        
      </div>
    )
  }
  // componentDidMount() {
  //   console.log("执行componentDidMount")
  // }
  // componentDidUpdate(preProp, prevState, snapshot) {
  //   console.log("执行componentDidUpdate")
  // }
  
  increment() {
    this.setState({
      counter: this.state.counter + 1
    })   
  }
  changeCpnShow() {
    this.setState({
      isShow: !this.state.isShow
    })
  }

}
